<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/animation.css" />
    <script src="./js/swiper-bundle.min.js"></script>
  </head>
  <body>
    <script src="./js/rem.js"></script>
    <header>
      <ul class="nav"></ul>
      <div class="search-wrap">
        <div class="search">
          <i class="iconfont icon-search"></i>
          <input type="text" placeholder="斗罗大陆" id="search" />
        </div>
        <div class="srot">
          <p>国漫</p>
          <p>日漫</p>
          <p>全部分类</p>
        </div>
      </div>
    </header>

    <!--  -->
    <!-- 电影列表 -->
    <main>
      <div class="banner">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/animation/1.jpg" alt="" />
              <p>大理寺日志2 : 计划执行！前往最难副本</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/animation/2.jpg" alt="" />
              <p>斗破苍穹 : 势如疾风！三千雷动震山河</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/animation/3.jpg" alt="" />
              <p>斗罗大陆 : 敢接三叉戟的对手，登场！</p>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <h4>最近更新</h4>
      <ul class="list"></ul>
    </main>

    <!-- 底部导航 -->
    <footer>
      <a href="./index.html">
        <img src="./images/tabbar/2-1.png" alt="" />
        <p>首页</p>
      </a>
      <a href="./vip.html">
        <img src="./images/tabbar/4.png" alt="" />
        <p>vip</p>
      </a>
      <a href="./hotChat.html">
        <img src="./images/tabbar/1.png" alt="" />
        <p>热议</p>
      </a>
      <a href="./my.html">
        <img src="./images/tabbar/3.png" alt="" />
        <p>我的</p>
      </a>
    </footer>
    <a href="JavaScript:;" id="up">
      <i class="iconfont icon-arrow-up"></i>
    </a>
    <script>
      let up = document.getElementById('up')

      up.onclick = () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
      }
      // 定义导航数据
      let navData = [
        {
          name: '直播',
          src: 'JavaScript:;',
        },
        {
          name: '精选',
          src: './index.html',
        },
        {
          name: '发现',
          src: 'JavaScript:;',
        },
        {
          name: '电视剧',
          src: './TV.html',
        },
        {
          name: '动漫',
          src: './animation.html',
          class: 'animation',
        },
        {
          name: '电影',
          src: 'JavaScript:;',
        },
        {
          name: '综艺',
          src: 'JavaScript:;',
        },
        {
          name: '少儿',
          src: 'JavaScript:;',
        },
      ]
      let navWrap = document.querySelector('.nav')
      navData.forEach((item) => {
        if (item.class == 'animation') {
          navWrap.innerHTML += `
      <li><a href="${item.src}" class=${item.class}>${item.name}</a></li>
      `
        } else {
          navWrap.innerHTML += `
      <li><a href="${item.src}">${item.name}</a></li>
      `
        }
      })
      // let animationLi = document.getElementsByClassName('animation')[0]
      navWrap.scrollLeft = 260
      // 电影列表数据
      let movieList = [
        {
          img: './images/animation/1.jpg',
          name: '大理寺日记2',
          info: ' 勘破迷雾，直面过往真相',
        },
        {
          img: './images/animation/2.jpg',
          name: '斗破苍穹',
          info: '携手薰儿初战迦南学院',
        },
        {
          img: './images/animation/3.jpg',
          name: '斗罗大陆',
          info: ' 敢接三叉戟的对手，登场！',
        },
        {
          img: './images/animation/4.jpg',
          name: '新奥特曼',
          info: ' 计划执行！前往最难副本',
        },
        {
          img: './images/animation/5.jpg',
          name: '灵剑尊',
          info: ' 天地三界，我为至尊！',
        },
        {
          img: './images/animation/6.jpg',
          name: '武神主宰',
          info: '武神跌落，浴火少年再起',
        },
      ]
      let movieWrap = document.querySelector('.list')
      movieList.forEach((item) => {
        movieWrap.innerHTML += `
                  <li>
                    <img src=${item.img} alt="" />
                    <p>${item.name}</p>
                    <span>${item.info}</span>
                  </li>
                  `
      })
      // 轮播图
      var swiper = new Swiper('.mySwiper', {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    </script>
  </body>
</html>
